<template>
    <nav class="navbar navbar-expand-md navbar-dark sticky-top shadow-sm">
        <div class="container">
            <router-link class="navbar-brand" to="/">网易云音乐</router-link>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapse">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="collapse">
               <!-- <ul class="navbar-nav mr-auto">
                   <li class="nav-item">
                       <router-link class="nav-link" to="/">首页</router-link>
                   </li>
                   <li class="nav-item">
                       <router-link class="nav-link" to="/about">关于</router-link>
                   </li>
                   <li class="nav-item">
                       <router-link class="nav-link" to="/login">登录</router-link>
                   </li>
               </ul> -->
                <div class="form-inline ml-auto">
                    <div class="input-group">
                        <label for="navbar-search" class="sr-only">搜索</label>
                        <input type="text" id="navbar-search" class="form-control border-0" name="keywords" v-model="keywords" @keyup.enter="searchTracks"/>
                        <div class="input-group-append">
                            <button class="form-control border-0 input-group-text" @click="searchTracks">搜索</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </nav>
</template>

<script>
    export default {
        name: "navbar",
        data() {
            return {
                keywords: ""
            }
        },
        methods: {
            searchTracks() {
                this.$router.push({
                    path: '/s',
                    query: {
                        q: this.keywords
                    }
                })
            }
        }
    }
</script>
